<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="js/jquery-2.1.1.min.js"></script>
    <title>Amaze UI</title>

    <style>
        body{
            background-color: #cccccc;
            font: 12px Microsoft YaHei, Tahoma, Helvetica, 'SimSun', sans-serif;
        }
        table{
            border-collapse: collapse;
        }
        td{
            border: 1px solid #cccccc;
            background-color: #ffffff;
        }
        tr:hover{
            color: green;
        }
        .contener {
            width: 500px;
            margin: 10px auto;
        }

        .img {
            width: 100%;
        }
        .text_img {
            position: absolute;
            width: 100%;
            z-index: 2;
            bottom: 3px;
            background-color: rgba(189, 188, 188, 0.45);
        }
        tr{
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(function ($) {
            $('table tr').each(function(i,n){
                console.log(n);
                var $n=$(n);

                $n.on('click',function(){
                    console.log(this);
                })
            })
        });
    </script>
</head>
<body>
<div class="contener">
    <table>
        <tr>
            <td colspan="2">
                <h3>你好这是一个测试标题</h3>
                <p>8月15日</p>
                <img src="img/1366x768.jpg" alt="" class="img"/>
                <div>
                    你好，这是描述的测试，这里是描述啊，哈哈哈哈，哈哈哈哈
                </div>
                <a href="#">查看全文</a>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="position: relative">
                <img src="img/1366x768.jpg" alt="" class="img"/>

                <div class="text_img">
                    <div class="text_img_span">测试测试测试测试测试测试测试测试测试测试测试</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</td>
            <td><img src="img/1366x768.jpg" width="50px" height="50px"></td>
        </tr>
        <tr>
            <td>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</td>
            <td><img src="img/1366x768.jpg" width="50px" height="50px"></td>
        </tr>
        <tr>
            <td>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</td>
            <td><img src="img/1366x768.jpg" width="50px" height="50px"></td>
        </tr>
        <tr>
            <td>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</td>
            <td><img src="img/1366x768.jpg" width="50px" height="50px"></td>
        </tr>
    </table>
</div>
</body>
</html>
